<template>
  <div>
    <Yq-header :needBack="true">
      <p slot="content">退款详情</p>
    </Yq-header>
    <group gutter="0" style="padding-top: 38px;">
      <flexbox orient="vertical" v-for="obligationList in obligationList">
        <flexbox-item style="border-bottom: solid 1px gainsboro;">
          <p style="line-height: 30px;font-size: 16px;margin-left: 15px;">{{obligationList.applyTime}}</p>
        </flexbox-item>
        <flexbox-item>
          <flexbox :gutter="0" style="border-bottom: solid 1px gainsboro;padding: 10px 0;">
            <flexbox-item :span="4">
              <div style="display: block;width:80px;height:80px;margin:10px 5px 10px 15px;">
                <!--<img :src=order.itemUrl alt="itemImg" style="width: 100%;"> 正式图片时可直接图片100%-->
                <img :src=obligationList.pic alt="商品图片" style="width:80px;height:80px;">
              </div>
            </flexbox-item>
            <flexbox-item>
              <p style="line-height: 20px;font-size: 13px;">{{obligationList.itemName}}</p>
              <p style="line-height: 20px;font-size: 13px;padding-top: 10px;color: #000">¥{{obligationList.totalCount}}</p>
            </flexbox-item>
          </flexbox>
        </flexbox-item>
        <flexbox-item v-if="obligationList.reason!==''&&obligationList.reason!==undefined&&obligationList.reason!==null">
          <flexbox style="border-bottom: solid 1px gainsboro;padding: 10px 0">
            <flexbox-item :span="4"><span style="display: inline-block;margin: 0 0 0 15px;">退款理由:</span></flexbox-item>
            <flexbox-item><div style="font-size: 13px;color: #a9a9a9;">{{obligationList.reason}}</div></flexbox-item>
          </flexbox>
        </flexbox-item>
        <flexbox-item>
          <flexbox style="border-bottom: solid 1px gainsboro;padding: 10px 0">
            <flexbox-item :span="4"><span style="display: inline-block;margin: 0 0 0 15px;">退款金额:</span></flexbox-item>
            <flexbox-item><div style="font-size: 13px;color: #000">¥{{obligationList.tuiprice}}</div></flexbox-item>
          </flexbox>
        </flexbox-item>
        <flexbox-item>
          <flexbox style="padding: 10px 0">
            <flexbox-item :span="4"><span style="display: inline-block;margin: 0 0 0 15px;">订单状态:</span></flexbox-item>
            <flexbox-item><div style="font-size: 13px;">{{obligationList.status}}</div></flexbox-item>
          </flexbox>
        </flexbox-item>
      </flexbox>
    </group>
  </div>
</template>

<script>
  import { Group, Cell, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem, XButton, XTextarea } from 'vux'
  import * as urls from '../../../../api/urls'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      Flexbox,
      FlexboxItem,
      XButton,
      XTextarea,
      YqHeader
    },
    data () {
      return {
        showType: 'coupon',
        index: 0,
        obligationList: [
          {
            id: 1,
            reson: '商品不符合卖家描述商品不符合卖家描述商品不符合卖家描述商品不符合卖家描述',
            money: '50.00',
            status: '审核中',
            src: '../../../../../static/images/userImg.png',
            name: '商品名称商品名称商品名称商品名称商品名称',
            price: '50',
            number: 5
          }
        ]
      }
    },
    methods: {
      getOrderDetail () {
        let userId = this.$store.state.userInfo.id
        let refundId = this.$store.state.userOrder.refundId
        let that = this
        that.http(urls.refundDetail, {userId: userId, id: refundId}, function (res) {
          if (res.status === 100) {
            that.obligationList = res.data.refund
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = '服务器错误，请稍后重试'
        })
      },
      weixinfn20 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.getOrderDetail()
      this.weixinfn20()
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    /*text-align: center;*/
    /*color: #fff;*/
    /*background-color: #20b907;*/
    border-radius: 4px;
    background-clip: padding-box;
    margin-top: 8px;
  }
  div{
    font-size: 13px;
    color: #636363;
  }
</style>
